<template>
  <div>
    <div class="common-form">商品信息</div>
    <el-form-item label="活动名称">
      <p class="fb">{{ form.active_name }}</p>
    </el-form-item>
    <el-form-item label="商品名称">
      <p class="fb">{{ form.product_name }}</p>
      <el-button @click="product_detail(0)" type="text" size="small">商品详情</el-button>
    </el-form-item>
    <el-form-item label="商品图片"><ImagePreview :src="form.product_image" width="80px" /></el-form-item>
  
    <!-- 商品详情 -->
  <el-dialog title="商品详情" :visible.sync="prodVisible" @close="prodVisible=false" :close-on-click-modal="true" :close-on-press-escape="false" width="1300px">
    <div class="dialog-height">
      <Productdetail :product_id="product_id" @close="prodVisible=false"></Productdetail>
    </div>
  </el-dialog>
  </div>
  
</template>

<script>
import ImagePreview from '@/components/ImagePreview/index';
import Productdetail from "./productdetail.vue";
export default {
  components: {
    ImagePreview,
    Productdetail,
  },
  data() {
    return {
      product_id:'',
      prodVisible:false,

    };
  },
  inject: ['form'],
  created() {
    
  },
  methods: {
    product_detail() {
      this.product_id = this.form.product_id;
      this.prodVisible = true;
    },
  }
};
</script>

<style>
.dialog-height {
  height: 70vh;
}
</style>

